<template>
  <view class="content">
  	<!-- banner -->
  	<view class="banner">
			<swiper style="width:100%;height: 433.8rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item @click="mycat()">
									<image  style="width:100%;height: 433.8rpx;"
									 src="../static/images/home/banner.png" mode="">
									</image>
							</swiper-item>
							<swiper-item @click="mycat()">
								<image style="width:100%;height: 433.8rpx;"
								 src="../static/images/home/banner(2).jpg" mode="">
								</image>
							</swiper-item>
							<swiper-item @click="mycat()">
							<image style="width:100%;height: 433.8rpx;"
							 src="../static/images/home/banner(1).jpg" mode="">
							</image>
							</swiper-item>
			</swiper>
  		
  	</view>
  	<!-- 信息个数 -->
  	<view class="message">
  		<view class="message1"  @click="equipment">
  			<view class="message1-top">
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-left: 30rpx;">设备状态</text>
  			</view>
  			<view class="message1-right">
  				<text style="font-size: 60rpx;color: rgba(255, 255, 255, 1);">{{equipmentNum}}</text>
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-right: 20rpx;margin-bottom: 8rpx;">个</text>
  			</view>
  		</view>
  		<view class="message2" @click="report">
  			<view class="message2-top">
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-left: 30rpx;">巡检报告</text>
  			</view>
  			
  			<view class="message2-right">
  				<text style="font-size: 60rpx;color: rgba(255, 255, 255, 1);">{{reportNum}}</text>
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-right: 20rpx;margin-bottom: 8rpx;">个</text>
  			</view>
  		</view>
  		<view class="message3" @click="alarmInfo">
  			<view class="message3-top">
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);">告警信息</text>
  			</view>
  			
  			<view class="message3-right">
  				<text style="font-size: 60rpx;color: rgba(255, 255, 255, 1);">{{alarmNum}}</text>
  				<text style="font-size: 20rpx;color: rgba(255, 255, 255, 1);margin-right: 20rpx;margin-bottom: 8rpx;">个</text>
  			</view>
  		</view>
  	</view>
  	<!-- 图标 -->
  	<view class="icons">
  		<view class="icons1" style="display: flex;flex-direction: column;" @click="gas">
  			<image src="../static/images/home/qthj.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
				<text class="IconsText">气体环境</text>
  		</view>
			<view class="icons2" style="display: flex;flex-direction: column;" @click="auto">
				<image src="../static/images/home/zdxj .png" mode="" style="width: 130rpx;height: 130rpx;"></image>
				<text class="IconsText">自动巡检</text>
			</view>
			<view class="icons3" style="display: flex;flex-direction: column;" @click="Manual">
				<image src="../static/images/home/sdxj .png" mode="" style="width: 130rpx;height: 130rpx;"></image>
				<text class="IconsText">手动巡检</text>
			</view>
			<view class="icons4" style="display: flex;flex-direction: column;" @click="Trendchart">
				<image src="../static/images/home/qst.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
				<text class="IconsText" style="display: flex;justify-content: center;align-items: center;">趋势图</text>
			</view>
  	</view>
  	<!-- 报警信息 -->
		<view class="alamMesage">
			<ul style="list-style-type: none;" :class="{ anim: animate == true }">
				<li style="display: flex;" v-for="(item,key) in alarmList" :key="item.id" id="con1">
					<image src="../static/images/home/red.png"  
								 style="width: 32rpx;height: 32rpx;margin-top: 18rpx;margin-left: 8rpx;">
					</image>
					<view class="alamMesageText">
						<text style="margin-left: 8rpx;">
							<font style="font-size: 28rpx;font-family: Gotham Pro Narrow;font-weight: 500;color: #333333;">{{item.robot_name}}</font> 
							<font style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #666666;margin-left:6rpx;">{{item.alarminfo}}</font>
						</text>
						<text>
							<font style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: 400;color: #666666;margin-left: 30rpx;">{{item.alarmtime}}</font>
						</text>
					</view>
				</li>
			</ul>
		</view>
  	<!-- 任务推送 -->
		<view class="task">
			<view class="newTask">
				<text style="margin-left: 19rpx;">最新任务</text>
			</view>
			<view style="display: flex;align-items: center;">
				<view class="tasks"  @click="open(item.id)" v-for="(item,key) in taskArry" :key="item.id">
					<view class="tasks1">
						<view class="tasks1-1">
							<text style="font-size: 22rpx;font-family: Source Han Sans CN;font-weight: bold;color: #333333;">{{item.task_name}}</text>
							<text style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 500;color: #666666;">{{item.robot_name}}</text>
						</view>
						<view class="tasks1-2">
							<text v-show="item.inspect_type==1" style="font-size: 18rpx;font-family: Source Han Sans CN;font-weight: 500;color: #162187;">定点</text>
							<text v-show="item.inspect_type==0" style="font-size: 18rpx;font-family: Source Han Sans CN;font-weight: 500;color: #162187;">连续</text>
							<text style="font-size: 16rpx;font-family: Source Han Sans CN;font-weight: 500;color: #333333;">{{item.speed}}/min</text>
						</view>
					</view>
					<view class="tasks2">
						<view class="tasks2-1">
							<text style="font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 500;color: #56DFEF;">{{item.execution_time}}H</text>
						</view>
						<view class="tasks2-2">
							<text v-show="item.task_state==0" style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFEFE;">未执行</text>
							<text v-show="item.task_state==1" style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFEFE;">已执行</text>
						</view>
					</view>
				</view>
			</view>
		</view>
  	<!-- 弹出层 -->
		<view class="tanchu">
			<uni-popup ref="popup" type="center" :animation="false">
					<view class="tanchuTitle">
						<text >巡检点详情</text>
						<uni-icons type="closeempty" size="15" @click="dialogClose"></uni-icons>
					</view>
					<view style="height: 336rpx;overflow: auto;">
						 <table class="table">
						    <!-- 表头行 -->
						    <thead class="tanchuHeader">
						      <tr>
						        <th align="center" width="110">巡检点编码</th>
						        <th align="center" width="110">巡检点名称</th>
						        <th align="center" width="120">巡检点距离(m)</th>
						      </tr>
						    </thead>
						    <!-- 表格数据行 -->
						    <tbody v-if="xjPinot.length > 0">
						      <tr v-for="(item,index) in xjPinot" :key="index">
						        <td align="center">{{item.position_num}}</td>
						        <td align="center">{{item.position_name}}</td>
						        <td align="center">{{item.position_dist}}</td>
						      </tr>
						    </tbody>
						    <tbody v-else>
						      <tr>
						        <td colspan="4" style="text-align: center;padding-top: 80rpx;background-color: #f7f7f7;">暂无数据</td>
						      </tr>
						    </tbody>
						  </table>
					</view>
			</uni-popup>
		</view>
  </view>
</template>

<script>
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import {alamMessage} from '@/api/alam/alam.js'
	import {report} from '@/api/Report/Report.js'
	import {taskList} from '@/api/index.js'
	import cookie from '../cookie.js'
	import {TaskDetails} from '@/api/addTask/addTask.js'
	
  export default { 
		data(){
			return {
				//首页banner图
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				linkUrl: 'http://www.hfzssw.com/',
				//token校验
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//设备状态个数
				equipmentNum:'',
				//告警信息个数
				alarmNum:'',
				//巡检列表信息个数
				reportNum:'',
				//任务列表
				taskArry:[],
				//告警信息
				alarmList:[
					{ 
						alarmtime: "暂无数据",
						id:0,
					},
				 ],
				// 警告数据中间
				animate: false,
				//巡检点详情
				xjPinot:[]
			}
		},
    onLoad(){
			// 设备状态个数
			this.equipmentList();
			// 告警信
			this.alarm();
			// 巡检报告
			this.xjReport();
			// 任务列表
			this.taskListHandle();
			this.initPullDownRefresh(); // 初始化下拉刷新
		},
		mounted() {
		 setInterval(this.scroll, 4000);//初始化滚动警告数据
		},
		methods:{
			//跳转到官网
			mycat(){
					let url = 'http://www.hfzssw.com/'
					// 填写要跳转的链接 
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + url
						// page.json定义的路径 传url到webview界面去接收-实现跳转
					})
			},
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
				this.creater_time = ''; // 清空当前选择的时间
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
				// 下拉刷新时重新加载数据
				this.equipmentList();// 设备状态个数
				this.alarm();// 告警信息
				this.xjReport();// 巡检报告
				this.taskListHandle();// 任务列表
		
				// 在1秒后停止下拉刷新
				setTimeout(() => {
			      uni.stopPullDownRefresh();
				}, 1000);
			},
			//告警信息
			alarm(){
				alamMessage(this.token,this.secretKey).then(Response => {
					this.alarmNum = Response.total
						
					if(Response.rows != [] && Response.rows.length > 0 ){
						this.alarmList = Response.rows;
					}
					
				})
			},
			//中间滚动警告数据
			scroll() {
				this.animate = true; 
			  this.timer1 = setTimeout(() => { 
			  this.alarmList.push(this.alarmList[0]); // 将数组的第一个元素添加到数组的
				this.alarmList.shift(); //删除数组的第一个元素
			  this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
				}, 500)
			},
			//任务列表
			taskListHandle(){
				taskList(this.token,this.secretKey).then(Response=>{
					this.taskArry = Response.rows.slice(0,3)
				})
			},
			//设备状态个数
			equipmentList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					this.equipmentNum = Response.total
				})
			},
			//巡检报告
			xjReport(){
				report(this.token,this.secretKey).then(Response => {
					this.reportNum = Response.total
				})
			},
			moreClick(){
				uni.switchTab({
				  url: '/pages/alam/index' // 目标页面的路径
				});
			},
			// 设备状态页面
			equipment(){
				uni.navigateTo({
					url:'/pages/common/equipment/index'
				})
			},
			//巡检报告页面
			report(){
				uni.navigateTo({
					url:'/pages/common/Report/index'
				})
			},
			//告警信息页面
			alarmInfo(){
				uni.switchTab({
					url:'/pages/alam/index'
				})
			},
			//气体环境页面
			gas(){
				uni.navigateTo({
					url:'/pages/common/gas/gas'
				})
			},
			//自动巡检
			auto(){
				uni.navigateTo({
					url:'/pages/common/Auto/index'
				})
			},
			//手动巡检
			Manual(){
				uni.navigateTo({
					url:'/pages/common/Manual/Manual'
				})
			},
			//趋势图
			Trendchart(){
				uni.navigateTo({
					url:'/pages/common/Trendchart/Trendchart'
				})
			},
			//弹出层
			open(id) {
				cookie.set('syjtask_id',id)
				this.$refs.popup.open('center')
			},
			//任务详情
			rwxq(){
				TaskDetails(this.token,this.secretKey,this.id).then( Response =>{
					//巡检点详情
					this.xjPinot = Response.data.pointlist
				})
			},
			dialogClose() {
				this.$refs.popup.close()
			},
		}
  }
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	page{
		 background: #F5F5F5;
	}
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
	.banner{
		width: 100%;
	}
	.message{
		width: 726rpx;
		height: 168rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 16rpx;
	}
	.message1{
		width: 234rpx;
		height: 168rpx;
		background-image: url(../static/images/home/jiqiren.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.message1-top{
		width: 200rpx;
		height: 50rpx;
		display: flex;
		align-items: flex-end;
		/* justify-content: center; */
		/* background-color: coral; */
	}
	.message1-right{
		width: 140rpx;
		height: 89rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		font-family: 'Gotham-Bold', Arial, sans-serif;
		/* background-color: darkgoldenrod; */
	}
	.message2{
		width: 234rpx;
		height: 168rpx;
		background-image: url(../static/images/home/plc.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.message2-top{
		width: 200rpx;
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		/* background-color: cornflowerblue; */
	}
	.message2-right{
		width: 140rpx;
		height: 89rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		/* background-color: darkkhaki; */
	}
	.message3{
		width: 234rpx;
		height: 168rpx;
		background-image: url(../static/images/home/gaojin.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.message3-top{
		width: 170rpx;
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		/* background-color: darksalmon; */
	}
	.message3-right{
		width: 140rpx;
		height: 89rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		/* background-color: lightcoral; */
	}
	.alamMesage{
		overflow: hidden;
		height: 48rpx;
	}
	.alamMesageText{
		margin-top: 14rpx;
	}
	.anim {
	  transition: all 0.5s;
	  margin-top: -54rpx;
	}
	#con1 li {
	  list-style: none;
	    /* line-height: 30px; */
	  height: 64rpx;
	}
	.icons{
		width: 710rpx;
		height: 284rpx;
		background-color: rgba(255, 255, 255, 1); 
		border-radius: 12rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.IconsText{
		width: 130rpx;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #464646;
		margin-top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: aquamarine; */
	}
	.alamMesage{
		width: 710rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
	
	.task{
		width: 710rpx;
		height: 340rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
		/* background-color: #56DFEF; */
	}
	.newTask{
		width: 510rpx;
		height: 68rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: flex-end;
		/* margin-top: 31rpx; */
		/* background-color: cadetblue; */
	}
	.tasks{
		width: 219rpx;
		height: 220rpx;
		background: #F8FCFF;
		box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(22,33,135,0.09);
		border-radius: 10rpx;
		margin-top: 23rpx;
		padding-left: 10rpx;
		padding-top: 10rpx;
		display: flex;
		margin-right: 20rpx;
		/* margin-left: 5rpx; */
		/* background-color: #F5A241; */
	}
	.tasks1{
		width: 114rpx;
		display: flex;
		flex-direction: column;
		/* align-items: flex-end; */
		justify-content: space-around;
		/* background-color: #F5A241; */
	}
	.tasks1-1{
		display: flex;
		flex-direction: column;
		/* background-color: #56DFEF; */
	}
	.tasks1-2{
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		/* background-color: aquamarine; */
	}
	.tasks2{
		width: 94rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-around;
		/* background-color: seagreen; */
	}
	.tasks2-1{
		width: 65rpx;
		height: 29rpx;
		border: 1px solid #56DFEF;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #F5A241; */
	}
	.tasks2-2{
		width: 81rpx;
		height: 33rpx;
		background: #F5A241;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}
	/* 提示框样式 */
	.tanchu /deep/ .uni-popup .uni-popup__wrapper{
		width: 693rpx;
		height: 419rpx;
		background: #F7F7F7  !important;
		border-radius: 10rpx;
	}
	.tanchuTitle{
		width: 693rpx;
		height: 83rpx;
		background: #E8E9EF;
		border-radius: 10rpx;
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	.table{
		border-spacing: 0;
	}
	.table thead th {
	    background-color: #f5f5f5; 
	    position: sticky;
	    top: 0;
	    z-index: 1;
			font-size: 29rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			height: 74rpx;
	}
	.table tbody tr {
		height: 64rpx;
		border-radius: 10rpx;
	}
	.table tbody tr:nth-child(odd) {
	    background: #F1F4FE;
	}
	.table th,
	.table td {
	  border: none;
	}
		
	.table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}
</style>
